<script setup>

import Header from "@/components/Header.vue";
import BackTop from "@/components/BackTop.vue";
import {StarFilled} from "@element-plus/icons-vue";
</script>
<script>
import store from "@/store";

export default {
  data() {
    return {
      categories: ['少儿', '动漫', '真人', '搞笑', '戏剧', '舞蹈', '音乐', '电影', '短剧', '剧情', '综艺', '用户'],
    }
  },
  methods: {
    searchVideo() {
      // this.$refs.video_container.searchData();
      this.$router.push({
        path: "/Hot",
        query: {
          keys: store.state.search.key
        }
      })
    },
  }
}
</script>
<template>
  <header>
    <Header @custom-event="searchVideo"></Header>
  </header>
  <BackTop></BackTop>
  <main>
    <el-card>
      <div class="page-container">
        <el-card>
          <el-icon size="20">
            <StarFilled/>
          </el-icon>&nbsp;&nbsp;
          <b>收藏夹 StarBag</b>
          <el-divider></el-divider>
          <el-row :gutter="30" class="bag">
            <el-col v-for="category in categories" :span="6">
              <div class="video-img">
                <img src="@/static/video1.png" alt="1">
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-card>
  </main>
</template>

<style scoped>
.page-container {
  width: 90%;
  min-height: 100vh;
  margin: auto;
  position: relative;
  top: 30px;
}
.video-img {
  width: 263px;
  height: 148px;
  margin-bottom: 2rem;
}

.video-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* 设置遮罩层的背景颜色或渐变 */
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.66);
}
.bag{
  padding-left: 20px;
}

</style>